<template>
  <view class="page">
    <view class="page-hd">
      <up-navbar bgColor="#1951FA" class="navbar">
        <template #left>
          <up-search placeholder="请输入应用名称或拼音" v-model="keyword" :showAction="false" shape="square" :clearabled="true"></up-search>
        </template>
      </up-navbar>
    </view>

    <view class="page-bd">

      <ScrollMenu v-model="current" @selected="handleSelect" @switch-tab="handleSwitchTab" :data="classifyData" />

    </view>
  </view>
</template>

<script setup>
import ScrollMenu from '@/components/base-components/scroll-menu/scroll-menu.vue';
// import classifyData from "@/pages_template/common/classify.data.js";
import classifyData from "./assets/apps.data.js";

const current = reactive({index: 1});
const {proxy} = getCurrentInstance();

function handleSelect(type, data) {
  console.log('选择', type, data);
  const url = data.url;
  if (url) {
    proxy.$tab.navigateTo(url);
  }
}

function handleSwitchTab(index) {
  console.log('页面切换tab', index);
}
</script>

<style scoped lang="scss">
@import "@/static/scss/theme.scss";

$border-color: #E5E5EB;
$theme-color: #1951FA;
$error-color: #F53F3F;

.page {
  height: 100vh;
  background-color: #F4F8FB;
  &-hd {
    height: 146rpx;
  }
  &-bd {
    height: calc(100vh - 146rpx);
  }
  .navbar {
    height: 60rpx;
  }
}
</style>
